<template>
  <view class="scrollbox">
    <!--    <view-->
    <!--        style="background-image: url('https://seerforwdw.info/seer-image/diduo.jpg');background-position: center;background-repeat: no-repeat;background-size: cover"-->
    <!--        class="bg-set"-->
    <!--    ></view>-->
    <!-- 页面内容 -->
    <!--    <view class="slideshow">-->
    <!--      <view class="slideshow-image" style="background-image: url('https://seerforwdw.info/seer-image/diduo.jpg')"></view>-->
    <!--      <view class="slideshow-image" style="background-image: url('https://seerforwdw.info/seer-image/diduo1.jpg')"></view>-->
    <!--      <view class="slideshow-image" style="background-image: url('https://seerforwdw.info/seer-image/diduo2.jpg')"></view>-->
    <!--      <view class="slideshow-image" style="background-image: url('https://seerforwdw.info/seer-image/diduo3.jpg')"></view>-->
    <!--    </view>-->
    <!--    <view class="cu-list menu card-menu margin-bottom-xl shadow-lg radius"-->
    <!--          style="position:fixed;left: 50%;top: 50%;width: 90%;transform: translateX(-50%);margin: 0;overflow: hidden;z-index: 10">-->
    <!--      <view class="cu-item" style="background-color: rgba(255,255,255,0.8);">-->
    <!--        <view class="content" @click="toAbout">-->
    <!--          <image src="https://seerh5.61.com/resource/assets/PetType/1.png"></image>-->
    <!--          <text class="text-grey">关于程序</text>-->
    <!--        </view>-->
    <!--        <TnIcon name="right"></TnIcon>-->
    <!--      </view>-->
    <!--      <view class="cu-item" style="background-color: rgba(255,255,255,0.8);">-->
    <!--        <view class="content" @click="appreciate">-->
    <!--          <image-->
    <!--              src="https://seerh5.61.com/resource/assets/PetType/2.png"></image>-->
    <!--          <text class="text-grey">源码地址</text>-->
    <!--        </view>-->
    <!--        <TnIcon name="right"></TnIcon>-->
    <!--      </view>-->
    <!--      <view class="cu-item" style="background-color: rgba(255,255,255,0.8);">-->
    <!--        <view class="content" @click="resetApi">-->
    <!--          <image-->
    <!--              src="https://seerh5.61.com/resource/assets/PetType/3.png"></image>-->
    <!--          <text class="text-grey">更新文章</text>-->
    <!--        </view>-->
    <!--        <TnIcon name="right"></TnIcon>-->
    <!--      </view>-->
    <!--      <view class="cu-item" style="background-color: rgba(255,255,255,0.8);">-->
    <!--        <view class="content" @click="previewImage">-->
    <!--          <image-->
    <!--              src="https://seerh5.61.com/resource/assets/PetType/4.png"></image>-->
    <!--          <text class="text-grey">联系作者</text>-->
    <!--        </view>-->
    <!--        <TnIcon name="right"></TnIcon>-->
    <!--      </view>-->
    <!--      <view class="cu-item" style="background-color: rgba(255,255,255,0.8);">-->
    <!--        <button class="cu-btn content" open-type="feedback">-->
    <!--          <image src="https://seerh5.61.com/resource/assets/PetType/5.png"></image>-->
    <!--          <text class="text-grey">意见反馈</text>-->
    <!--        </button>-->
    <!--        <TnIcon name="right"></TnIcon>-->
    <!--      </view>-->
    <!--    </view>-->

    <view>
      <view class="top-backgroup">
        <image src='https://resource.tuniaokj.com/images/my/my-bg2.png' mode='widthFix' class='backgroud-image'></image>
      </view>

      <view class="about__wrap">
        <view class="flex justify-between align-center margin-bottom">
          <view class="justify-content-item">
            <view class="flex align-center">
              <!-- 图标logo -->
              <view class="logo-pic shadow">
                <view class="logo-image">
                  <view
                      class="shadow-blur"
                      style="width: 120rpx;height: 120rpx;background-size: cover;"
                      :style="{'backgroundImage': `url(${pmAvatar})`}"
                  >
                  </view>
                  <!-- <view class="tn-icon-logo-tuniao" style="font-size: 140rpx;color: #01BEFF;box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);"></view> -->
                </view>
              </view>
              <view class="padding-right text-white">
                <view class="padding-right padding-left-sm text-xxl">
                  可爱又迷人的赛佬们~
                </view>
                <view class="padding-right padding-top-xs padding-left-sm text-cut">欢迎使用赛迷小程序</view>
              </view>
            </view>
          </view>
        </view>

        <!-- 方式7 start-->
        <view class="flex padding-top-xl" style="margin-top: -20rpx;">
          <view class="flex-sub my-shadow margin-right-sm bg-white" style="padding: 30rpx 0;" @click="toAbout">
            <view class="flex flex-direction justify-center align-center">
              <view class="icon7__item--icon flex justify-center align-center">
                <image class="" src='https://resource.tuniaokj.com/images/my/my17.png' mode='aspectFit'></image>
              </view>
              <view class="text-center">
                <view class="text-cut text-gray">关于小程序</view>
              </view>
            </view>
          </view>
          <view class="flex-sub my-shadow margin-left-sm bg-white" style="padding: 30rpx 0;" @click="appreciate">
            <view class="flex flex-direction justify-center align-center">
              <view class="icon7__item--icon flex justify-center align-center">
                <image class="" src='https://resource.tuniaokj.com/images/my/my14.png' mode='aspectFit'></image>
              </view>
              <view class="text-center">
                <view class="text-cut text-gray">源码地址</view>
              </view>
            </view>
          </view>
        </view>
      </view>

      <view class="cu-list menu card-menu radius my-shadow"
            style="width: 90%;margin: 40rpx auto 0;overflow: hidden;">
        <view class="cu-item">
          <view class="content" @click="previewImage">
            <image
                src="https://seerh5.61.com/resource/assets/PetType/1.png"></image>
            <text class="text-grey">联系作者</text>
          </view>
          <TnIcon name="right"></TnIcon>
        </view>
        <view class="cu-item">
          <button class="cu-btn content" open-type="feedback">
            <image src="https://seerh5.61.com/resource/assets/PetType/2.png"></image>
            <text class="text-grey">意见反馈</text>
          </button>
          <TnIcon name="right"></TnIcon>
        </view>
        <view class="cu-item" v-if="openId === 'ov2zS5RoM8fqV_5womZDqF-0e7aI'">
          <view class="content" @click="resetApi">
            <image
                src="https://seerh5.61.com/resource/assets/PetType/3.png"></image>
            <text class="text-grey">更新图鉴</text>
          </view>
          <TnIcon name="right"></TnIcon>
        </view>
      </view>
    </view>
    <view class="cu-modal" :class=" showResetApi ? 'show' : ''" @click="showResetApi = false">
      <view class="cu-dialog tn-text-left" @click.stop="" style="background-color: #fff;">
        <view class="tn-p-sm flex justify-between">
          <view>
            密码
          </view>
          <TnIcon name="close" color="#666666" @click="showResetApi = false"></TnIcon>
        </view>
        <view class="tn-p-sm">
          <TnInput v-model="password" placeholder="请输入密码" type="password"/>
        </view>
        <view class="tn-p-sm tn-pt-0 flex align-center justify-end">
          <button class="cu-btn bg-blue" @click="handleReset">确认</button>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
  import TnIcon from '../../../uni_modules/tuniaoui-vue3/components/icon/src/icon.vue';
  import TnInput from '../../../uni_modules/tuniaoui-vue3/components/input/src/input.vue';
  import {ref, getCurrentInstance} from 'vue'

  const {proxy} = getCurrentInstance()

  const pmAvatar = __wxConfig.accountInfo.icon

  const openId = ref(uni.getStorageSync('openid'))

  const toAbout = () => {
    uni.navigateTo({
      url: '/pages/about/about'
    })
  }

  const appreciate = () => {
    uni.setClipboardData({
      data: 'https://gitee.com/wu-dewan/sail-assistant-mini-program.git',
      showToast: true
    })
  }

  const showResetApi = ref(false)
  const password = ref('')
  const resetApi = () => {
    showResetApi.value = true
  }
  const handleReset = async () => {
    if (password.value === 'wdw15055758569') {
      proxy.$api.refreshPublicAccountArticle()
      uni.showToast({
        title: '刷新成功'
      })
      showResetApi.value = false
    } else {
      uni.showToast({
        title: '密码错误!',
        icon: 'error'
      })
    }
  }

  const previewImage = () => {
    uni.previewImage({
      urls: ['https://seerforwdw.info/seer-image/weixin.jpg']
    })
  }
</script>

<style scoped lang="scss">
  .scrollbox {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    overflow-y: scroll;
  }

  .bg-set {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: -1;
  }

  /* 相册 start*/
  .slideshow {
    top: 0;
    position: absolute;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
  }

  .slideshow-image {
    position: absolute;
    width: 100%;
    height: 100%;
    background: no-repeat 50% 50%;
    background-size: cover;
    -webkit-animation-name: kenburns;
    animation-name: kenburns;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-duration: 16s;
    animation-duration: 16s;
    opacity: 1;
    transform: scale(1.2);
  }

  .slideshow-image:nth-child(1) {
    -webkit-animation-name: kenburns-1;
    animation-name: kenburns-1;
    z-index: 3;
  }

  .slideshow-image:nth-child(2) {
    -webkit-animation-name: kenburns-2;
    animation-name: kenburns-2;
    z-index: 2;
  }

  .slideshow-image:nth-child(3) {
    -webkit-animation-name: kenburns-3;
    animation-name: kenburns-3;
    z-index: 1;
  }

  .slideshow-image:nth-child(4) {
    -webkit-animation-name: kenburns-4;
    animation-name: kenburns-4;
    z-index: 0;
  }

  @-webkit-keyframes kenburns-1 {
    0% {
      opacity: 1;
      transform: scale(1.2);
    }
    1.5625% {
      opacity: 1;
    }
    23.4375% {
      opacity: 1;
    }
    26.5625% {
      opacity: 0;
      transform: scale(1);
    }
    100% {
      opacity: 0;
      transform: scale(1.2);
    }
    98.4375% {
      opacity: 0;
      transform: scale(1.2117647059);
    }
    100% {
      opacity: 1;
    }
  }

  @keyframes kenburns-1 {
    0% {
      opacity: 1;
      transform: scale(1.2);
    }
    1.5625% {
      opacity: 1;
    }
    23.4375% {
      opacity: 1;
    }
    26.5625% {
      opacity: 0;
      transform: scale(1);
    }
    100% {
      opacity: 0;
      transform: scale(1.2);
    }
    98.4375% {
      opacity: 0;
      transform: scale(1.2117647059);
    }
    100% {
      opacity: 1;
    }
  }

  @-webkit-keyframes kenburns-2 {
    23.4375% {
      opacity: 1;
      transform: scale(1.2);
    }
    26.5625% {
      opacity: 1;
    }
    48.4375% {
      opacity: 1;
    }
    51.5625% {
      opacity: 0;
      transform: scale(1);
    }
    100% {
      opacity: 0;
      transform: scale(1.2);
    }
  }

  @keyframes kenburns-2 {
    23.4375% {
      opacity: 1;
      transform: scale(1.2);
    }
    26.5625% {
      opacity: 1;
    }
    48.4375% {
      opacity: 1;
    }
    51.5625% {
      opacity: 0;
      transform: scale(1);
    }
    100% {
      opacity: 0;
      transform: scale(1.2);
    }
  }

  @-webkit-keyframes kenburns-3 {
    48.4375% {
      opacity: 1;
      transform: scale(1.2);
    }
    51.5625% {
      opacity: 1;
    }
    73.4375% {
      opacity: 1;
    }
    76.5625% {
      opacity: 0;
      transform: scale(1);
    }
    100% {
      opacity: 0;
      transform: scale(1.2);
    }
  }

  @keyframes kenburns-3 {
    48.4375% {
      opacity: 1;
      transform: scale(1.2);
    }
    51.5625% {
      opacity: 1;
    }
    73.4375% {
      opacity: 1;
    }
    76.5625% {
      opacity: 0;
      transform: scale(1);
    }
    100% {
      opacity: 0;
      transform: scale(1.2);
    }
  }

  @-webkit-keyframes kenburns-4 {
    73.4375% {
      opacity: 1;
      transform: scale(1.2);
    }
    76.5625% {
      opacity: 1;
    }
    98.4375% {
      opacity: 1;
    }
    100% {
      opacity: 0;
      transform: scale(1);
    }
  }

  @keyframes kenburns-4 {
    73.4375% {
      opacity: 1;
      transform: scale(1.2);
    }
    76.5625% {
      opacity: 1;
    }
    98.4375% {
      opacity: 1;
    }
    100% {
      opacity: 0;
      transform: scale(1);
    }
  }

  /* 相册 end*/


  /* 顶部背景图 start */
  .top-backgroup {
    height: 450rpx;
    z-index: -1;

    .backgroud-image {
      width: 100%;
      height: 450rpx;
      // z-index: -1;
    }
  }

  /* 顶部背景图 end */

  /* 用户头像 start */
  .logo-image {
    width: 120rpx;
    height: 120rpx;
    position: relative;
    background-color: #FFFFFF;
  }

  .logo-pic {
    background-size: cover;
    background-repeat: no-repeat;
    // background-attachment:fixed;
    background-position: top;
    border-radius: 50%;
    overflow: hidden;
  }

  /* 页面 start*/
  .about-shadow {
    border-radius: 15rpx;
    box-shadow: 0rpx 0rpx 50rpx 0rpx rgba(0, 0, 0, 0.07);
  }

  .about {

    &__wrap {
      position: relative;
      z-index: 1;
      margin: 20rpx 30rpx;
      margin-top: -230rpx;
    }
  }

  /* 页面 end*/

  .my-shadow {
    box-shadow: 0rpx 0rpx 80rpx 0rpx rgba(0, 0, 0, 0.07);
    border-radius: 20rpx;
  }

  /* 图标容器7 start */
  .icon7 {
    &__item {
      width: 30%;
      background-color: #FFFFFF;
      border-radius: 10rpx;
      padding: 10rpx;
      margin: 20rpx 10rpx;
      transform: scale(1);
      transition: transform 0.3s linear;
      transform-origin: center center;

      &--icon {
        width: 100rpx;
        height: 100rpx;
        font-size: 60rpx;
        border-radius: 0;
        margin-bottom: 18rpx;
        position: relative;
        z-index: 1;
      }
    }
  }

  /* 图标容器1 start */
  .icon1 {
    &__item {
      // width: 30%;
      background-color: #FFFFFF;
      border-radius: 10rpx;
      padding: 30rpx;
      margin: 20rpx 10rpx;
      transform: scale(1);
      transition: transform 0.3s linear;
      transform-origin: center center;

      &--icon {
        width: 40rpx;
        height: 40rpx;
        font-size: 28rpx;
        border-radius: 50%;
        position: relative;
        z-index: 1;

        &::after {
          content: " ";
          position: absolute;
          z-index: -1;
          width: 100%;
          height: 100%;
          left: 0;
          bottom: 0;
          border-radius: inherit;
          opacity: 1;
          transform: scale(1, 1);
          background-size: 100% 100%;
          background-image: url(https://resource.tuniaokj.com/images/cool_bg_image/icon_bg.png);
        }
      }
    }
  }

  /* 图标容器1 end */

  /* 底部tabbar start*/
  .footerfixed {
    position: fixed;
    width: 100%;
    bottom: 0;
    z-index: 999;
    background-color: #FFFFFF;
    box-shadow: 0rpx 0rpx 30rpx 0rpx rgba(0, 0, 0, 0.07);
  }

  .tabbar {
    display: flex;
    align-items: center;
    min-height: 110rpx;
    justify-content: space-between;
    padding: 0;
    height: calc(110rpx + env(safe-area-inset-bottom) / 2);
    padding-bottom: calc(env(safe-area-inset-bottom) / 2);
  }

  .tabbar .action {
    font-size: 22rpx;
    position: relative;
    flex: 1;
    text-align: center;
    padding: 0;
    display: block;
    height: auto;
    line-height: 1;
    margin: 0;
    overflow: initial;
  }

  .tabbar .action .bar-icon {
    width: 100rpx;
    position: relative;
    display: block;
    height: auto;
    margin: 0 auto 10rpx;
    text-align: center;
    font-size: 42rpx;
  }

  .tabbar .action .bar-icon image {
    width: 50rpx;
    height: 50rpx;
    display: inline-block;
  }
</style>
